<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test::responsive UI</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #desktop {
        display: none;
      }
      #mobile {
        display: block;
      }
      body {
        background-color: pink;
      }
      @media (min-width: 800px) {
        #desktop {
          display: block;
        }
        #mobile {
          display: none;
        }
        body {
          background-color: #eeeeee;
        }
      }
    </style>
  </head>
  <body>
    <h1>Responsive UI</h1>
    <h2 id="desktop">Desktop</h2>
    <h2 id="mobile">Mobile</h2>

    <h5 id="width"></h5>
    <h5 id="height"></h5>
    <h5 id="ratio"></h5>

    <script>
      function showDeviceInfo() {
        document.getElementById('width').innerText = `Width: ${window.innerWidth}`
        document.getElementById('height').innerText = `Height: ${window.innerHeight}`
        document.getElementById('ratio').innerText = `Device Pixel Ratio: ${window.devicePixelRatio.toFixed(3)}`
      }

      showDeviceInfo();
      window.addEventListener('resize', showDeviceInfo);
      window.addEventListener('orientationchange', showDeviceInfo);
      setInterval(showDeviceInfo, 500)
    </script>
  </body>
</html>
